<!-- 文章管理 -->
<div nz-row>
  <div nz-col nzSpan="24">
    <span>
      文章来源：
      <nz-tree-select style="width: 150px;" [nzNodes]="workOrgNodes" [(ngModel)]="queryData.orgId"
        [nzDropdownStyle]="dropdownStyle">
      </nz-tree-select>
      文章类型：
      <nz-select nzAllowClear [(ngModel)]="queryData.category" style="width: 150px;">
        <nz-option *ngFor="let option of categoryNodes" [nzLabel]="option.vcName" [nzValue]="option.vcID">
        </nz-option>
      </nz-select>
      文章标题：
      <input nz-input [(ngModel)]="queryData.title" style="width: 200px">
      发文时间：
      <nz-date-picker [(ngModel)]="queryData._startDate" nzFormat="yyyy-MM-dd" nzPlaceHolder="开始日期">
      </nz-date-picker>
      <nz-date-picker [(ngModel)]="queryData._endDate" nzFormat="yyyy-MM-dd" nzPlaceHolder="结束日期">
      </nz-date-picker>
      <button style="margin-left:10px;" nz-button nzType="primary" (click)="loadData({pageNum:1})">
        <i nz-icon nzType="search" nzTheme="outline"></i>
        查询
      </button>
    </span>
  </div>
</div>
<div nz-row>
  <div nz-col nzSpan="24">
    <button style="margin:5px 5px 5px 0;" nz-button (click)="addModal()" nzType="primary">
      <i nz-icon nzType="plus" nzTheme="outline"></i>
      新增
    </button>
    <button style="margin: 5px 0 5px 5px;" (click)="delete()" nz-button nzType="primary">
      <i nz-icon nzType="close"></i>
      删除
    </button>
  </div>
</div>
<div nz-row>
  <div nz-col nzSpan="24">
    <nz-table #basicTable [nzData]="tableData" nzSize="small" [nzLoadingDelay]="1000" nzBordered
      [nzShowPagination]="false" [nzFrontPagination]="false" [nzScroll]="lockHeadScroll">
      <thead>
        <tr>
          <th nzShowCheckbox nzWidth="50px" [(nzChecked)]="allCheck" (nzCheckedChange)="checkAll($event)"></th>
          <th nzWidth="150px" nzAlign="center">文章类型</th>
          <th nzAlign="center">标题</th>
          <th nzWidth="200px" nzAlign="center">文章来源</th>
          <th nzWidth="150px" nzAlign="center">发文时间</th>
          <th nzWidth="30%" nzAlign="center">附件</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of basicTable.data;index as i" (dblclick)="editModal(data.id)" nz-tooltip
          nzTooltipTitle="双击查看详情和修改" nzTooltipPlacement="bottom" style="cursor:pointer">
          <td nzShowCheckbox [(nzChecked)]="data.checked">
          </td>
          <!-- 文章类型 -->
          <td>
            <div class="cmiddle" style="max-height:105px;">{{data.category}}</div>
          </td>
          <!-- 标题 -->
          <td>
            <div class="cmiddle" style="max-height:105px;">{{data.title}}</div>
          </td>
          <!-- 文章来源 -->
          <td>
            <div class="cmiddle" style="max-height:105px;">{{data.operOrgName}}</div>
          </td>
          <!-- 发文时间 -->
          <td>
            <div class="cmiddle" style="max-height:105px;">{{data.operTime}}</div>
          </td>
          <!-- 附件 -->
          <td>
            <div class="cmiddle" style="max-height:105px;">
              <a [attr.href]="formatHref(data)" [attr.download]="data.fileName">{{data.fileName}}</a>
            </div>
          </td>
          <!-- 发文人 -->
          <!-- <td>
              <div class="cmiddle" style="max-height:105px;">{{data.operUser}}</div>
            </td> -->
        </tr>
      </tbody>
    </nz-table>
    <div class="pageWrap">
      每页
      <nz-select [(ngModel)]="pagination.pageSize" (ngModelChange)="pageSizeChange($event)" style="width:100px">
        <nz-option nzValue="20" nzLabel="20"></nz-option>
        <nz-option nzValue="50" nzLabel="50"></nz-option>
        <nz-option nzValue="100" nzLabel="100"></nz-option>
        <nz-option nzValue="200" nzLabel="200"></nz-option>
      </nz-select>
      条&nbsp;&nbsp;&nbsp;总共<span class="pageTotal">{{pagination.totalNum}}</span>条
    </div>
    <div class="pageInation">
      <nz-pagination [nzPageSize]="pagination.pageSize" [nzPageIndex]="pagination.pageNo"
        [nzTotal]="pagination.totalNum" (nzPageIndexChange)="pageIndexChange($event)"></nz-pagination>
    </div>
  </div>
</div>


<nz-modal [(nzVisible)]="addVisible" nzTitle="新增" (nzOnCancel)="addCancel()" [nzFooter]="null"
  [nzBodyStyle]="{width: '80vw'}" nzWidth="80vw" [nzContent]="editorTemp_add">
</nz-modal>
<ng-template #editorTemp_add>
  <div class="formBar">
    <span style="width: 250px;">
      文章种类<span class="required">*</span>：
      <nz-select nzAllowClear [(ngModel)]="addData.category" style="width: 150px;">
        <nz-option *ngFor="let option of categoryNodes" [nzLabel]="option.vcName" [nzValue]="option.vcID">
        </nz-option>
      </nz-select>
    </span>
    <span style="width: 330px;">
      发文时间：
      <nz-date-picker [(ngModel)]="addData._operDate" nzFormat="yyyy-MM-dd" style="width: 115px;">
      </nz-date-picker>
      <nz-time-picker [(ngModel)]="addData._operTime"></nz-time-picker>
    </span>
    <span style="width: 250px;">
      文章来源<span class="required">*</span>：
      <nz-tree-select style="width: calc(100% - 100px);" [nzNodes]="workOrgNodes" [(ngModel)]="addData.operOrgId"
        [nzDropdownStyle]="dropdownStyle">
      </nz-tree-select>
    </span>
  </div>
  <div class="formBar">
    <span style="width: calc(80vw);">
      文章标题<span class="required">*</span>：
      <input nz-input [(ngModel)]="addData.title" style="width: calc(100% - 80px);">
    </span>
  </div>
  <editor [init]="editorConfig" [(ngModel)]="addData.content">
  </editor>
  <div class="bottomBar">
    <nz-upload class="uploader" [nzShowUploadList]="true" (nzChange)="uploadFileChange('add',$event)"
      [nzFileList]='fileList' nzMultiple="false" [nzCustomRequest]="customReq" [nzAction]="upload"
      [nzOpenFileDialogOnClick]="!fileList.length">
      <button nz-button nzType="primary" (click)="checkUpload()"><i nz-icon nzType="upload"></i><span>附件</span></button>
    </nz-upload>
    <button style="margin:2px;" nz-button (click)="addOk()" nzType="primary">
      <i nz-icon nzType="check" nzTheme="outline"></i>
      发布
    </button>
  </div>
</ng-template>

<!-- 修改 -->
<nz-modal [(nzVisible)]="editVisible" nzTitle="修改" (nzOnCancel)="editCancel()" [nzFooter]="null"
  [nzBodyStyle]="{width: '80vw'}" nzWidth="80vw" [nzContent]="editorTemp_edit">
</nz-modal>
<ng-template #editorTemp_edit>
  <div class="formBar">
    <span style="width: 250px;">
      文章种类<span class="required">*</span>：
      <nz-select nzAllowClear [(ngModel)]="editData.category" style="width: 150px;">
        <nz-option *ngFor="let option of categoryNodes" [nzLabel]="option.vcName" [nzValue]="option.vcID">
        </nz-option>
      </nz-select>
    </span>
    <span style="width: 330px;">
      发文时间：
      <nz-date-picker [(ngModel)]="editData._operDate" nzFormat="yyyy-MM-dd" style="width: 115px;">
      </nz-date-picker>
      <nz-time-picker [(ngModel)]="editData._operTime"></nz-time-picker>
    </span>
    <span style="width: 250px;">
      文章来源<span class="required">*</span>：
      <nz-tree-select style="width: calc(100% - 100px);" [nzNodes]="workOrgNodes" [(ngModel)]="editData.operOrgId"
        [nzDropdownStyle]="dropdownStyle">
      </nz-tree-select>
    </span>
  </div>
  <div class="formBar">
    <span style="width: calc(80vw);">
      文章标题<span class="required">*</span>：
      <input nz-input [(ngModel)]="editData.title" style="width: calc(100% - 80px);">
    </span>
  </div>
  <editor [init]="editorConfig" [(ngModel)]="editData.content">
  </editor>
  <div class="bottomBar">
    <nz-upload class="uploader" [nzShowUploadList]="true" (nzChange)="uploadFileChange('edit',$event)"
      [nzFileList]='fileList' nzMultiple="false" [nzCustomRequest]="customReq" [nzAction]="upload"
      [nzOpenFileDialogOnClick]="!fileList.length">
      <button nz-button nzType="primary" (click)="checkUpload()"><i nz-icon nzType="upload"></i><span>附件</span></button>
    </nz-upload>
    <button style="margin:2px;" nz-button (click)="editOk()" nzType="primary">
      <i nz-icon nzType="check" nzTheme="outline"></i>
      发布
    </button>
  </div>
</ng-template>